<template>
<div id="zxc">
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
       <el-form :inline="true" class="demo-form-inline">
      <!-- <el-form-item label="" class="jgc">
        <el-input placeholder="请输入" @change="caidanq()" v-model="name1" prefix-icon="iconfont el-icon-search"></el-input>
      </el-form-item> -->
    </el-form>
    <el-tree
        :check-strictly="true"
        :default-expanded-all="false"
        node-key="id"
        class="zt1"
        :data="data"
        :props="defaultProps"
        default-expand-all
        ref="tree"
        @node-click="handleNodeClick">
        </el-tree>
  </div></el-col>
  <el-col :span="6"><div class="grid-content1 bg-purple1">
<div class="zt">
      <h3 class="zy">作业范围</h3>
      <bm-control>
        <el-button v-if="this.tj!='tj'" type="primary" @click="tijiao()" class="bj">提交</el-button>
        <el-button v-if="this.bj!='bj'" type="primary" @click="bianji()" class="bj">编辑</el-button>
        <el-button v-if="this.qx!='qx'" type="primary" @click="quxiao()" class="bj">取消</el-button>
      </bm-control>
</div>
<div class="huizhi">
  <el-button v-if="this.xs!='xs'" type="primary" @click="toggle('polygonPath')" class="bj">{{ polygonPath.editing ? '停止绘制' : '开始绘制' }}</el-button>
</div>
<div class="ts"  v-if="this.ts!='ts'">
  <h4><i class="el-icon-warning-outline"></i>点击或拖动鼠标绘制电子围栏，右击鼠标结束图形绘制。完成绘制后，点击提交按钮保存。仅支持绘制单个电子围栏区域</h4>
</div>
 <div class="mapbox">
    <baidu-map
      :center="center"
      :zoom="zoom"
      :map-click="false"
      @mousemove="syncPolygon"
      @ready="handler"
      style="height:650px;width:725px;"
      @click="paintPolygon"
      @rightclick="newPolygon"
    >
      <bm-polygon
        :path="path"
        v-for="path of polygonPath.paths"
        :key="path.toString()"
        stroke-color="red"
        fill-color="silver"
        :fill-opacity="0.5"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        @click="alertpath"
        :editing="editing" 
        @lineupdate="updatePolygonPath" 
      />
    </baidu-map>
  </div>
  </div>
  </el-col>
</el-row>
</div>
</template>
<script>
import axios from "axios";
export default {
    data(){
      return{
        xs:"xs",
        bj:"zxc",
        qx:'qx',
        tj:"tj",
        ts:"ts",
        //name1:"",
        xx:[],
        tMechanismId:'',
        tMechanismBusinessrange:'',
        name: 'Polygon',
        haha: '百度地图',
        center: { lng: 116.412732, lat: 39.911707 },
        zoom: 13,
        editing: false,
        polygonPath: {
        editing: false,
        paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
        },
        dtqy:"",
        data: [],
        defaultProps: {
          children: 'children',
          label: 'cliqueName'
        }
      }
    },
      created(){
        this.caidanq();
      },  
      methods:{
        caidanq(){
             axios.get("/api/findMenuListmanagement").then((data) => {
              this.data = data.data
        });
        },
        tijiao(){
          var jwd=""
          console.log(this.tMechanismBusinessrange)
          for(var i=0;i<this.tMechanismBusinessrange[0].length;i++){
               jwd += this.tMechanismBusinessrange[0][i].lng+","+this.tMechanismBusinessrange[0][i].lat+","
          }
          if (jwd.length > 0) {
          jwd = jwd.substr(0, jwd.length - 1);
          }
          console.log(this.tMechanismId+","+jwd)
         axios.get("/api/institutions-tms-institutional-operations/updOperations?tMechanismId="+this.tMechanismId+"&tMechanismBusinessrange="+jwd).then((data) => {
          console.log(data)
          this.caidanq();
           this.bj="zxc"
            this.xs="xs"
            this.qx="qx"
            this.tj="tj"
            this.ts='ts'
            this.$notify({
          title: '成功',
          message: '网点编辑成功',
          type: 'success'
        });
            this.polygonPath.paths = []
        });
        },
        bianji(){
          if(this.polygonPath.paths==''){
              this.$notify.error({
              title: '错误',
              message: '请先选择区域点！！！'
        });
          }else{
            this.bj="bj"
            this.xs="bj"
            this.qx="xx"
            this.tj="zxc"
            this.ts='cc'
          }
        },
        quxiao(){
          this.bj="zxc"
            this.xs="xs"
            this.qx="qx"
            this.tj="tj"
            this.ts='ts'
            this.polygonPath.paths = []
        },
         handleNodeClick(data) {
          this.editing=false
          this.tMechanismId = data.cliqueId
          this.polygonPath.paths = []
          axios.get("/api/institutions-tms-institutional-operations/findOperationByName?idId="+data.cliqueId).then(aa => {
            //console.log(aa.data.ipLatitudeLongitudeRange)
            if(aa.data.ipLatitudeLongitudeRange!=null || aa.data.ipAddressLatitude!=null){
                this.dtqy=aa.data.ipAddressLatitude.split(",");
                this.center.lng = this.dtqy[0];
                this.center.lat = this.dtqy[1];
                var bb=aa.data.ipLatitudeLongitudeRange.split(",");
                this.xx=bb;
                var map_points1=[];
                for (let i = 0; i < this.xx.length; i++) {
                map_points1.push(new window.BMap.Point(this.xx[i],this.xx[i+1]))
                //console.log(this.xx[i],this.xx[i+1])
                i++;
                }
                this.polygonPath.paths.push(map_points1)
                //console.log(this.polygonPath.paths)
                this.tMechanismBusinessrange = this.polygonPath.paths
              }else{
                this.quxiao()
              }
          })
      },
     handler ({ BMap, map }) {
      //console.log(BMap, map)
      map.enableScrollWheelZoom(true)
      // map.centerAndZoom('青岛市', 13)
    },
    // 开启多边形绘制
    toggle (name) {
      this.editing=true
      this[name].editing = !this[name].editing
      if(this[name].editing == false){this.editing=false}
      // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
      if (this.polygonPath.paths && this.polygonPath.editing) {
        // this.polygonPath.paths = []
      }
    },
    // 鼠标移动时
    syncPolygon (e) {
      if (!this.polygonPath.editing) {
        return
      }
      const { paths } = this.polygonPath
      if (!paths.length) {
        return
      }
      const path = paths[paths.length - 1]
      if (!path.length) {
        return
      }
      if (path.length === 1) {
        path.push(e.point)
      }
      this.$set(path, path.length - 1, e.point)
    },
    // 鼠标右键点击时往路径里push一个面
    newPolygon (e) {
      this.editing=false
      console.log(e.point.lng)
      console.log(e.point.lat)
      if (!this.polygonPath.editing) {
        return
      }
      // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
      this['polygonPath'].editing = !this['polygonPath'].editing
      const { paths } = this.polygonPath
      if (!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
       this.tMechanismBusinessrange = this.polygonPath.paths

    },
    // 鼠标左键多边形绘制
    paintPolygon (e) {
      var c=false;
      //alert(e.point.lng + "--" + e.point.lat)
      var testx = parseFloat(e.point.lng);
      var testy = parseFloat(e.point.lat);
      //判断地图上是否有区域范围
      if(this.polygonPath.paths.length!=0){
      var lenth= this.polygonPath.paths[0].length;
       for(var i=0,j=lenth-1;i<lenth;j=i++){
        //判断点的经纬度是否在该范围
            if (this.polygonPath.paths[0][i].lat > testy !=this.polygonPath.paths[0][j].lat > testy && 
            testx <((this.polygonPath.paths[0][j].lng - this.polygonPath.paths[0][i].lng) *
                (testy - this.polygonPath.paths[0][i].lat)) /
                (this.polygonPath.paths[0][j].lat - this.polygonPath.paths[0][i].lat) +
                this.polygonPath.paths[0][i].lng
            )
            c = !c;
          //console.log(this.polygonPath.paths[0]);
       }
       //alert(c)
      }else{
        this.$notify.error({
        title: '错误',
        message: '请先选择区域点！！！'})
      }
      if (!this.polygonPath.editing) {
        return
      }
      const { paths } = this.polygonPath
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    },
    alertpath (e) {
      //console.log(e.currentTarget.so)
      //console.log(this.polygonPath.paths[0])
    },
    updatePolygonPath(e) {
      //编辑覆盖物时触发，获取坐标点集合	
      this.polygonPath.paths[0] = e.target.getPath()
    }
  }
 }

</script>
<style scoped>
.mapbox{
    position: relative;
    top: 10px;
    left: 10px;
}
.zt{
    color: #081123;
    background: hwb(202 85% 3%);
    border-radius: 9px;
    height: 45px;
}
*{
		margin: 0px;
	}
.el-row {
    margin-bottom: 20px;
   }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #f9fafc;
  }
  .bg-purple {
    background: #f9fafc;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 950px;
    opacity: 0.85;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .grid-content1 {
    border-radius: 4px;
    min-width: 600px;
    min-height: 500px;
    opacity: 0.85;
  }
  .ts{
    position: relative;
    left: 80px;
    color: red;
    top: 5px;
  }
  .zt1{
    color: rgb(87, 64, 201);
    font: 1em sans-serif;
    position: relative;
    top: 10px;
  }
  .zy{
    position: relative;
    top: 10px;
  }
  .bj{
    position: relative;
    left: 400px;
    top: -20px;
  }
  .jgc{
    position: relative;
    top: 10px;
  }
   .bg-purple1 {
    background: #f9fafc;
    border-radius: 9px;
  }
  .huizhi{
    position: relative;
    left: -650px;
    top: 25px;
  }
</style>